Este efecto tan llamativo es obra de Gaya Desing trabaja con jQuery y como puede verse consiste en un fondo con movimiento, ese fondo sólo es visible en la transparencia de una imagen. Para hacer más sencilla la explicación mejor será mostrarlo con capturas.

La imagen que vamos a añadir consiste en un texto, lo podemos crear con Photoshop o como en mi caso con GIMP. Hay distintas formas de conseguir un fondo transparente con GIMP.Y aquí una de ellas. Creamos la imagen y la guardamos como formato png.

550 x 150
Una vez tenemos la imagen con el mismo editor le añadimos transparencia al texto.
En herramientas marcamos sobre la varita para obtener selección difusa.


Seguidamente situamos el puntero sobre el texto y pulsamos botón derecho del ratón. Nos mostrará un desplegable, debemos escoger "colores" y a continuación "Color Alfa". Como resultado obtenemos la imagen con texto transparente que guardaremos en formato png.


Cuando tenemos la imagen es el momento de pasar a la plantilla.
Nos situamos justo antes de </head> y añadimos los estilos:


<style type='text/css'>.
content {
width: 500px;
/* ancho del contenido */
margin: 0px auto;
}
.scrollbg {background-image: url(url-imagen-fondo); /* imagen de fondo */
background-color: #000; /* color de fondo */
width: 550px; /* ancho imagen de fondo */
height: 150px; /* alto imagen de fondo */
}
.scrollbg img {
display: block;
}
</style>

La imagen que he creado para el ejemplo mide 550 X 150.
La de fondo puede ser una textura y la añadimos en scrollbg/url-imagen-fondo, el ancho lo modificamos en width y la altura en height.
En width de content, que es el bloque que contiene la imagen y el fondo también debemos añadir la misma anchura de la imagen con transparencia.
A continuación añadimos jquery/1.4.1/jquery.min.js si ya lo estamos utilizando omitimos este paso.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Ahora, copiamos el contenido del siguiente archivo y lo pegamos justo después.
Guardamos los cambios realizados y nos situamos en plantilla edición de HTML, allí editamos un nuevo gadget de HTML/Javascript y en su interior añadimos:

<div class='scrollbg' style='background-image: url(url-imagen-fondo)'>
<img src="url-imagen-texto-transparente" alt="" />
</div>

En url-imagen-fondo añadimos la misma url que anteriormente añadimos en los estilos.
En url-imagen-texto-transparente añadimos la url que creamos con fondo transparente.
Joan Irazu

ya lo habia visto hace tiempo en Gaya Desing, es un buen truco con jquery pero necesitaria crear mi propia imagen en photoshop y no soy muy bueno en photoshop asi que necesito tiempo, uno de estos dia lo hago :)

Responder
Matías Aravena
Este comentario ha sido eliminado por el autor.
Responder
Matías Aravena

@CHiCken: El truco en JQuery es muy bueno, hay que saber aplicarlo y también manejarse con diseños. Si tienes esto te saldrá a la perfección. Saludos!

Responder
Gem@

:: CHiCken yo no utilizo yo utilizo GIMP y como verás en dos sencillos pasos creas una imagen transparente :)

:: Roster te aseguro que es mucho más sencillo de añadir que otros efectos de jQuery, si acaso más entretenido por el tema de crear la imagen pero no es necesario tener conocimientos de diseño :)

Responder
MexaaC

A mi gimp se me traba al abrir, por eso utilizo Photoshop CS5 y no tengo problemas con el programa, a excepcion de que no se manipularlo muy bien xD

Responder
Laura (Recetas Trucos y Tips)

Qué chulo que queda, gracias por mostrarnos cómo hacerlo :)

Responder
Unknown

:O precioso...no tengo ni idea cómo hacer una imágen transparente...veré, miraré hasta que logre manejar el GIMP :$

Responder
Gem@

:: N.G. - C.W. yo me arreglo con GIMP para lo más básico pero es que tampoco sé hacer muchas más cosas lo que ocurre que probando y probando se aprenden cosas :)

:: Gracias a ti Laura por comentar ;)

:: Graciela recuerda que para este efecto es necesario jQuery si no lo utilizas en el blog lo puedes mostrar con un iframe que hace poquito nuestro notario/administrador nos mostraba como hacerlo :D

Responder
Unknown

jajaja tendremos que preguntarle al notario administrador, el sueldo que cobrará, mira si nos sale que un martes 13!

Responder
Unknown

estoy robando ideas :O

Chau bambina, hasta mañana

Responder
Gem@

:: Graciela yo creo que se portará bien el administrador :)
Puedes robar lo que quieras mientras me dejes el ordenador :D :D :D

Responder
Unknown

jajaja me hiciste recordar Copiar no es Robar :D

Más le vale portarse bien, las G & G, le harán rico, Bill quedará hecho un poroto a su lado :P

Responder
Gem@

:: Gracias por el enlace Graciela :)
Lo haremos rico y al fin tendrá una palmera con wifi :D

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top